<template>
    <div class="banner">
        <div class="top">
            {{ list.city }}[切换城市]
        </div>
        <div class="middle">
            <span id="big">23°</span>
            <img src="https://tianqi-stream.2345cdn.net/tqpcimg/tianqiimg/theme4/V2Images/icon_leizhengyu.png" alt="">
            <div class="duoyun">
                <span>多云</span>
                <img src="@/assets/1.png" alt="">
            </div>
        </div>
        <div class="bottom" v-if="list.info">
            <div>
                <i class="icon-area temper"></i>
                <span>温度{{list.info.low  }}~{{ list.info.high }}</span>
            </div>
            <div>
                <i class="icon-area ultraviolet"></i>
                <span>{{ list.info.fengxiang }} {{ list.info.fengli }}</span>
            </div>
            <div>
                <i class="icon-area humidity"></i>
                <span>湿度43%</span>
            </div>
            <div>
                <span>16:01更新</span>
            </div>
        </div>
    </div>
</template>

<script>
import {GetMenuData} from '@/api/home.js';
    export default {
        data(){
            return{
                list:{}
            }
        },
        mounted(){
            this.getData();
        },
        methods:{
            async getData(){
                const result = await GetMenuData(
                    {
                        method:'get',
                        url:'/api/weather'
                    }
                )
                console.log(result);
                this.list = result;
            }
        }
    }
</script>

<style lang="scss" scoped>
.banner{
    width:100%;
    color:white;
    z-index:999;
    position:absolute;
    top:100px;
    .top{
        font-size:12px;
    }
    .middle{
        width:300px;
        display:flex;
        #big{
            font-size:60px;
            font-weight: 400;
        }
        img{
            width:70px;
            height:70px;
        }
        .duoyun{
            display:flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            img{
                width:100px;
                height:15px;
            }
        }
    }
    .bottom{
        width:500px;
        display:flex;
        align-items:center;
        height:27px;
        color:white;
        div{
            width:25%;
            height:100%;
            border-right:1px solid white;
            text-align:center;
            justify-content: center;
            display:flex;
            align-items: center;
            &:last-child{
                border:none;
            }
            span{
                font-size:12px;
            }
            .icon-area.temper{
                display:block;
                width:26px;
                height:26px;
                background: url('https://tianqi-stream.2345cdn.net/tqpcimg/tianqiimg/theme4/V2Images/icon/icon_wendu@2x.png') no-repeat;
                background-position: center;
            }
            .icon-area.ultraviolet{
                display:block;
                width:26px;
                height:26px;
                background: url('https://tianqi-stream.2345cdn.net/tqpcimg/tianqiimg/theme4/V2Images/icon/icon_ziwaixian@2x.png') no-repeat;
                background-position: center;
            }
            .icon-area.humidity{
                display:block;
                width:26px;
                height:26px;
                background: url('https://tianqi-stream.2345cdn.net/tqpcimg/tianqiimg/theme4/V2Images/icon/icon_shidu@2x.png') no-repeat;
                background-position: center;
            }
        }
    }
}
</style>